<!-- This document was created with HomeSite 2.5 -->
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 3.2 Final//EN">
<HTML>
<!--
THE JAVASCRIPT COOKBOOK by Erica Sadun, webrx@mindspring.com
J. Brook Monroe, mrprogguy@techie.com
Copyright (c)1998 by Charles River Media. All Rights Reserved.
This applet can only be re-used or modifed by license holders of the
JavaScript Cookbook CD-ROM. Credit must be given in the source
code and this copyright notice must be maintained. If you do
not hold a license to the JavaScript Cookbook, you may NOT
duplicate or modify this code for your own use.
Use at your own risk. No warranty is given or implied of the suitability
of this applet for any specific application. Neither Erica Sadun nor
Charles River Media will be held responsible for any unwanted effects
due to the use of this applet or any derivative.
-->
<HEAD>
<TITLE>It Slices, It Dices</TITLE>
</HEAD>
<SCRIPT LANGUAGE="JavaScript"><!--
var baseStr = "As I was going to St. Ives, I met a man with seven wives.";
function SliceIt()
{
var beg = document.forms[0].beginIndex.value;
var end = document.forms[0].endIndex.value;
eval('document.forms[0].result.value="'+baseStr.slice(beg,end)+'"');
if(beg <= end)
eval('document.forms[0].result.value="'+baseStr.slice(beg,end)+'"');
else
alert('Beginning value must be greater than or equal to ending value.');}
//-->
</SCRIPT>
<BODY>
<FONT COLOR="007777"><H1><IMG SRC="../GRAFX/UTENS.JPG" WIDTH=80 HEIGHT=50
ALIGN = LEFT>It Slices, It Dices...</H1></FONT>
<BLOCKQUOTE><FONT COLOR="770000">
Actually, it just slices. In this recipe we investigate a new way to extract strings from other strings.
</FONT>
<FORM>
The string you're working with is '<SCRIPT LANGUAGE="JavaScript">document.write(baseStr)</SCRIPT>'<BR>
<TABLE>
<TR><TD>Enter the beginning index here:</TD><TD><INPUT TYPE="text" SIZE=3 NAME="beginIndex"></TD></TR>
<TR><TD>Enter the ending index here:</TD><TD><INPUT TYPE="text" SIZE=3 VALUE="" NAME="endIndex" > <INPUT TYPE="button" VALUE="Slice!" onClick="SliceIt()"></TD></TR>
</TABLE>
<SCRIPT LANGUAGE="JavaScript">
document.write('See the result here: <INPUT TYPE="text" SIZE='+(baseStr.length+1)+' NAME="result"><BR>');
</SCRIPT>
</FORM>
<FONT COLOR="007777"><H2>Discussion</H2></FONT>
<FONT SIZE=4>
You're already familiar with <FONT COLOR="770000">String.substr()</FONT>, which extracts a substring
from a string using a starting index and a number of characters to take. JavaScript 1.2 introduces
<FONT COLOR="770000">String.slice()</FONT>, which takes a starting index, and an ending index as a way
of specifying a substring to return.<p>
The rules for the beginning index and ending index are more complicated than for <FONT COLOR="770000">String.substr()</FONT>.
Given that:
<P><I>startSlice</I> is the zero-based position at which to begin slicing, and
</P>
<P><I>stopSlice</I> is the zero-based position at which to end slicing,
</P>
the following rules apply:
<UL>
<LI><FONT COLOR="770000">slice</FONT> extracts up to but not including <FONT COLOR="770000">stopSlice</FONT>. <FONT COLOR="770000">string.slice(1,8)</FONT>
extracts the second character through the eighth character (characters indexed 1 through 7).<BR>
For our sample string, that would yield <TT>'<SCRIPT LANGUAGE="JavaScript1.2">document.write(baseStr.slice(1,8))</SCRIPT>'</TT></LI>
<LI>When used as a negative index, <FONT COLOR="770000">stopSlice</FONT> indicates an offset from the end
of the string. <FONT COLOR="770000">string.slice(4,-1)</FONT> extracts the fifth character
through the second-to-last character in the string.<BR>
For our sample string, that would yield <TT>'<SCRIPT LANGUAGE="JavaScript1.2">document.write(baseStr.slice(4,-1))</SCRIPT>'</TT></LI>
</LI>
<LI>If you omit <FONT COLOR="770000">stopSlice</FONT> completely, <FONT COLOR="770000">slice()</FONT> just extracts to the end of
the string. Suppose we did that to our sample string, with 12 as the single argument:<BR>
<FONT COLOR="770000">string.slice(12)</FONT> yields <TT>'<SCRIPT LANGUAGE="JavaScript1.2">document.write(baseStr.slice(12))</SCRIPT>'</TT></LI>
</LI>
</UL>
<p>
Go back to the top of the page, play around with the form, and see what results this new function gives you.
</FONT>
<BR><BR><h5>Copyright ©1998 by Charles River Media, All Rights Reserved</h5>
</BODY>
</HTML>